<template>
  <!-- 电压 -->
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :xl="4" :lg="7" :md="8" :sm="24">
            <a-form-item label="车间">
              <a-select defaultValue="">
                <a-select-option value="">车间一</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xl="4" :lg="7" :md="8" :sm="24">
            <a-form-item label="工区">
              <a-select defaultValue="">
                <a-select-option value="">工区一</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="24">
            <a-form-item label="槽号">
              <a-input v-model="queryParam.id" placeholder="" />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <span
              class="table-page-search-submitButtons"
              :style="(advanced && { float: 'right', overflow: 'hidden' }) || {}"
            >
              <a-button type="primary" @click="searchQuery" icon="search">预测</a-button>
              <a-button style="margin-left: 8px" @click="resetSearchForm">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <a-tabs defaultActiveKey="1">
      <!-- 柱状图 -->
      <a-tab-pane tab="图表" key="1">
        <!-- <bar title="" :dataSource="barData" :height="height" /> -->
        <!-- <transfer-bar title="年度消耗流量一览表" :data="barData" x="日期" y="电压(V)" :height="height"/> -->
        <!-- <line-chart-multid :dataSource="lineData" :fields="fields" :height="height"/> -->
        <line-chart-multid
          title=""
          :height="height"
          :dataSource="lineChartMultid.dataSource"
          :fields="lineChartMultid.fields"
        />
      </a-tab-pane>
      <!-- 多列柱状图 -->
      <a-tab-pane tab="数据" key="2">
        <a-table ref="table" size="default" :columns="columns" :data-source="lineChartMultid.dataSource" />
      </a-tab-pane>
    </a-tabs>
  </a-card>
</template>

<script>
import Bar from '@/components/chart/Bar'
import LineChartMultid from '@/components/chart/LineChartMultid'
import TransferBar from '@/components/chart/TransferBar'
import STable from '@/components/table/'
import ATextarea from 'ant-design-vue/es/input/TextArea'
import AInput from 'ant-design-vue/es/input/Input'
import moment from 'moment'
import axios from 'axios'
import { httpAction, getAction } from '@/api/manage'

export default {
  name: 'TableList',
  components: {
    Bar,
    LineChartMultid,
    TransferBar,
    AInput,
    ATextarea,
    STable,
  },
  data() {
    return {
      height: document.body.clientHeight - 357,
      lineChartMultid: {
        dataSource: [],
        fields: ['LSTM', 'DQN', 'DNN', 'CNN', 'RNN'],
      },
      barData: [],
      barData2: [],
      lineData: [
        { type: 'Jan', 电压: 7.0 },
        { type: 'Feb', 电压: 6.9 },
        { type: 'Mar', 电压: 9.5 },
        { type: 'Apr', 电压: 14.5 },
        { type: 'May', 电压: 18.4 },
        { type: 'Jun', 电压: 21.5 },
        { type: 'Jul', 电压: 25.2 },
        { type: 'Aug', 电压: 26.5 },
      ],
      fields: ['电压'],
      visibleCreateModal: false,
      visible: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
      },
      form: null,
      mdl: {},

      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: {
        id: '1',
      },
      // 表头
      columns: [
        {
          title: '时间',
          dataIndex: 'type',
          width: '200px',
        },
        {
          title: 'LSTM',
          dataIndex: 'LSTM',
          needTotal: true,
          customRender: (text) => text,
        },
        {
          title: 'DQN',
          dataIndex: 'DQN',
          needTotal: true,
          customRender: (text) => text,
        },
        {
          title: 'DNN',
          dataIndex: 'DNN',
          needTotal: true,
          customRender: (text) => text,
        },
        {
          title: 'CNN',
          dataIndex: 'CNN',
          needTotal: true,
          customRender: (text) => text,
        },
        {
          title: 'RNN',
          dataIndex: 'RNN',
          needTotal: true,
          customRender: (text) => text,
        },
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {},

      selectedRowKeys: [],
      selectedRows: [],
    }
  },
  created() {
    //this.loadData1()
  },
  mounted() {
    const that = this
    window.onresize = () => {
      return (() => {
        that.height = document.body.clientHeight - 357
      })()
    }
  },
  methods: {
    loadData1() {
      var max = 100
      var min = 98
      this.lineChartMultid.dataSource = []
      for (let i = 0; i < 30; i += 1) {
        var data1 = Math.floor(Math.random() * (max - min + 1)) + min
        var data2 = Math.floor(Math.random() * (max - min + 1)) + min
        var data3 = Math.floor(Math.random() * (max - min + 1)) + min
        var data4 = Math.floor(Math.random() * (max - min + 1)) + min
        var data5 = Math.floor(Math.random() * (max - min + 1)) + min
        this.lineChartMultid.dataSource.push({ type: i, LSTM: data1, DQN: data2, DNN: data3, CNN: data4, RNN: data5 })
      }
    },
    loadData2(x, y, max, min, before = '', after = '') {
      let data = []
      for (let i = 0; i < 12; i += 1) {
        data.push({
          [x]: `${before}${i + 1}${after}`,
          [y]: Math.floor(Math.random() * (max - min + 1)) + min,
        })
      }
      return data
    },
    // 加载柱状图数据
    loadBarData() {
      var that = this
      that.lineData = []
      httpAction('/external/hadoop/list', this.queryParam, 'post')
        .then((res) => {
          if (res.success) {
            var list = []
            var data = res.result.data
            this.barData2 = data
            data.forEach((e) => {
              list.push({ x: e.date, y: e.electric })
              that.lineData.push({ type: e.date, 电压: e.electric })
            })
            this.barData = list
          } else {
            this.$message.warning(res.message)
          }
        })
        .finally(() => {})

      // this.barData = this.loadData2('x', 'y', 1000, 200)
    },
    handleEdit(record) {
      this.mdl = Object.assign({}, record)
      console.log(this.mdl)
      this.visible = true
    },
    handleOk() {},

    //添加逻辑
    handleModalVisible(isVisible) {
      this.visibleCreateModal = isVisible
    },
    handleCreateModalOk() {
      this.createForm.validateFields((err, fieldsValue) => {
        if (err) {
          return
        }
        const description = this.createForm.getFieldValue('description')
        axios
          .post('/saveRule', {
            desc: description,
          })
          .then((res) => {
            this.createForm.resetFields()
            this.visibleCreateModal = false
            this.loadRuleData()
          })
      })
    },
    handleCreateModalCancel() {
      this.visibleCreateModal = false
    },

    onChange(row) {
      this.selectedRowKeys = row.selectedRowKeys
      this.selectedRows = row.selectedRows

      console.log(this.$refs.table)
    },
    toggleAdvanced() {
      this.advanced = !this.advanced
    },

    resetSearchForm() {
      this.queryParam = {
        date: moment(new Date()),
      }
    },
    searchQuery() {
      //this.loadData1();
      this.lineChartMultid = {
        dataSource: [
          { type: '03-04 08:00', LSTM: 7.0, DQN: 3.9, DNN: 3.9, CNN: 1, RNN: 8 },
          { type: '03-04 09:00', LSTM: 6.9, DQN: 4.2, DNN: 3.9, CNN: 1, RNN: 8 },
          { type: '03-04 10:00', LSTM: 9.5, DQN: 5.7, DNN: 3.9, CNN: 1, RNN: 8 },
          { type: '03-04 11:00', LSTM: 14.5, DQN: 8.5, DNN: 3.9, CNN: 4, RNN: 8 },
          { type: '03-04 12:00', LSTM: 18.4, DQN: 11.9, DNN: 3.9, CNN: 6, RNN: 8 },
          { type: '03-04 13:00', LSTM: 21.5, DQN: 15.2, DNN: 3.9, CNN: 1, RNN: 8 },
          { type: '03-04 14:00', LSTM: 25.2, DQN: 17.0, DNN: 3.9, CNN: 1, RNN: 8 },
          { type: '03-04 15:00', LSTM: 26.5, DQN: 16.6, DNN: 3.9, CNN: 15, RNN: 8 },
          { type: '03-04 16:00', LSTM: 23.3, DQN: 14.2, DNN: 3.9, CNN: 1, RNN: 8 },
          { type: '03-04 17:00', LSTM: 18.3, DQN: 10.3, DNN: 3.9, CNN: 16, RNN: 8 },
          { type: '03-04 18:00', LSTM: 13.9, DQN: 6.6, DNN: 3.9, CNN: 1, RNN: 8 },
          { type: '03-04 19:00', LSTM: 9.6, DQN: 4.8, DNN: 3.9, CNN: 1, RNN: 8 },
        ],
        fields: ['LSTM', 'DQN', 'DNN', 'CNN', 'RNN'],
      }
    },
  },
  watch: {
    /*
      'selectedRows': function (selectedRows) {
        this.needTotalList = this.needTotalList.map(item => {
          return {
            ...item,
            total: selectedRows.reduce( (sum, val) => {
              return sum + val[item.dataIndex]
            }, 0)
          }
        })
      }
      */
  },
}
</script>